<!DOCTYPE html>
<html>
<head>
<title>Relativity Diagram</title>
</head>
<body>
<canvas id="relativityCanvas" width="450" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('relativityCanvas');
    const ctx = canvas.getContext('2d');

    // Function to draw an arrowhead
    function drawArrowhead(ctx, fromX, fromY, toX, toY, angle, length) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const headAngle = Math.atan2(dy, dx);
        ctx.save();
        ctx.fillStyle = ctx.strokeStyle;
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - length * Math.cos(headAngle - angle), toY - length * Math.sin(headAngle - angle));
        ctx.lineTo(toX - length * Math.cos(headAngle + angle), toY - length * Math.sin(headAngle + angle));
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // Set default styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    
    // --- Define Coordinates ---
    const origin = { x: 60, y: 280 };
    const xAxisEnd = { x: 420, y: 280 };
    const yAxisEnd = { x: 60, y: 20 };

    // --- Draw Axes ---
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(xAxisEnd.x, xAxisEnd.y); // x-axis line
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(yAxisEnd.x, yAxisEnd.y); // y-axis line
    ctx.stroke();

    // Draw arrowheads for axes
    drawArrowhead(ctx, origin.x, origin.y, xAxisEnd.x, xAxisEnd.y, Math.PI / 6, 10);
    drawArrowhead(ctx, origin.x, origin.y, yAxisEnd.x, yAxisEnd.y, Math.PI / 6, 10);

    // --- Label Axes and Frame ---
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.fillText('y', yAxisEnd.x - 5, yAxisEnd.y - 5);
    ctx.fillText('x', xAxisEnd.x + 5, xAxisEnd.y + 5);
    ctx.fillText('O', origin.x - 20, origin.y + 20);

    ctx.font = '20px "SimSun"'; // Use a font that supports Chinese characters
    ctx.fillText('S系', origin.x - 45, 160);

    // --- Draw the Square ---
    const squareSize = 100;
    const squareB = { x: 150, y: 230 };
    const squareA = { x: squareB.x, y: squareB.y - squareSize };
    const squareC = { x: squareB.x + squareSize, y: squareB.y };
    const squareD = { x: squareC.x, y: squareA.y };

    ctx.beginPath();
    ctx.rect(squareA.x, squareA.y, squareSize, squareSize);
    ctx.stroke();

    // --- Label the Square ---
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('A', squareA.x - 5, squareA.y - 5);
    ctx.fillText('B', squareB.x - 5, squareB.y + 20);
    ctx.fillText('C', squareC.x + 5, squareC.y + 20);
    ctx.fillText('D', squareD.x + 5, squareD.y - 5);

    ctx.fillText('L', squareA.x - 25, squareA.y + squareSize / 2 + 5);
    
    ctx.font = 'italic 18px "Times New Roman"';
    ctx.fillText('(L)', squareB.x + squareSize/2 - 15, squareB.y - 15);

    // --- Draw the Velocity Vector ---
    const vStart = { x: squareD.x + 5, y: squareA.y + squareSize / 2 };
    const vEnd = { x: vStart.x + 70, y: vStart.y };
    
    ctx.beginPath();
    ctx.moveTo(vStart.x, vStart.y);
    ctx.lineTo(vEnd.x, vEnd.y);
    ctx.stroke();
    drawArrowhead(ctx, vStart.x, vStart.y, vEnd.x, vEnd.y, Math.PI / 6, 10);
    
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('v', vEnd.x + 10, vEnd.y + 8);

</script>
</body>
</html>